<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<meta charset="utf-8">
	<title>-webkit-transition-timing-function demo</title>
	

<link rel="stylesheet" type="text/css" href="transition-timing-function_002.css" media="all">
</head>
<body>
<h1>-webkit-transition-timing-function</h1>
<div class="control_panel">
	<ul>
		<li>1：linear</li>
		<li>2：ease</li>
		<li>3：ease-in</li>
		<li>4：ease-out</li>
		<li>5：ease-in-out</li>
		<li>6：cubic-bezier(0.2, 0.3, 0.9, 0.7)</li>
		<li>7：cubic-bezier(0.8, -0.5, 0.3, 1.5)</li>
	</ul>
	<p class="btn_panel">
		<button id="go">GO</button>
		<button id="ready">RESET</button>
	</p>
	<p>更多自定义cubic-bezier曲线参见<br><a href="http://cubic-bezier.com/">http://cubic-bezier.com/</a></p>
</div>
<ul id="runner_list" class="runner_list">
	<li id="runner1" class="runner">1</li>
	<li id="runner2" class="runner">2</li>
	<li id="runner3" class="runner">3</li>
	<li id="runner4" class="runner">4</li>
	<li id="runner5" class="runner">5</li>
	<li id="runner6" class="runner">6</li>
	<li id="runner7" class="runner">7</li>
</ul>
<script type="text/javascript">
	window.onload=function(){
		var runnerList=document.getElementById("runner_list"),
			btnGo=document.getElementById("go"),
			btnReady=document.getElementById("ready"),
			runnerArr=Array.prototype.slice.call(runnerList.querySelectorAll("li"));

		btnGo.onclick=function(){
			runnerArr.forEach(function(i){
				i.classList.add('go');
			});
		};
		btnReady.onclick=function(){
			runnerArr.forEach(function(i){
				i.classList.remove('go');
			});
		}
	}
</script>


			
</body>
</html>
